<template>
	<view>
		<z-paging ref="paging" v-model="list" @query="queryList" show-refresher-when-reload>
			<template #top>
				<swiper v-if="bannerList.length" :autoplay="true" :interval="3000" :duration="1000" class="swiper"
					indicator-dots>
					<swiper-item v-for="item in bannerList" :key="item._id">
						<image class="bannerImage" :src="item.imageUrl" mode="aspectFill"></image>
					</swiper-item>
				</swiper>

				<view class="settings-box flex-row">
					<image src="/static/index/icon_xiaobitou.jpg" class="settings-box-image"></image>
					<text class="settings-box-text">设置考试时间</text>
				</view>

				<view class="navigator flex-row">
					<view class="flex-column" @click="routeInfoPage('ZX')">
						<image src="/static/index/baokaozixun.jpg" mode="heightFix" class="navigator-box-image"></image>
						<text class="navigator-box-text">报考资讯</text>
					</view>

					<view class="flex-column" @click="routeInfoPage('ZN')">
						<image src="/static/index/baokaozhinan.jpg" mode="heightFix" class="navigator-box-image">
						</image>
						<text class="navigator-box-text">报考指南</text>
					</view>

					<view class="flex-column" @click="routeInfoPage('DG')">
						<image src="/static/index/kaoshidagang.jpg" mode="heightFix" class="navigator-box-image">
						</image>
						<text class="navigator-box-text">考试大纲</text>
					</view>

					<view class="flex-column" @click="routeBeiKaoQuanPage">
						<image src="/static/index/beikaoxinde.jpg" mode="heightFix" class="navigator-box-image"></image>
						<text class="navigator-box-text">备考心得</text>
					</view>
				</view>

				<view class="information flex-row">
					<view class="latest"> 最新资讯 </view>
					<view class="line"> </view>
				</view>
			</template>

			<zixun-list-item v-for="(item,index) in list" :key="item.id" :item='item'></zixun-list-item>
		</z-paging>

	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		ref
	} from 'vue'

	const bannerDb = uniCloud.importObject("bannerObj", {
		"customUI": true
	});

	const db = uniCloud.importObject("consultObj", {
		customUI: true
	});

	onLoad(() => {
		getBannerList();
	})

	const bannerList = ref([]);

	/**
	 * 获取广告
	 */
	async function getBannerList() {
		let res = await bannerDb.getList();
		bannerList.value = res.data;
	}

	const paging = ref(null)
	// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
	const list = ref([])

	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
	const queryList = (pageNo, pageSize) => {
		db.getList((pageNo - 1) * pageSize, pageSize).then(res => {
			paging.value.complete(res.data);
		}).catch(res => {
			paging.value.complete(false);
		})
	}

	function routeInfoPage(type) {
		uni.navigateTo({
			url: '/pages/index/baokaozixun/baokaozixun?type=' + type
		})
	}

	function routeBeiKaoQuanPage() {
		uni.navigateTo({
			url: '/pages/index/beikaoxinde/beikaoxinde'
		})
	}

	uni.$on('consult_is_like_emit', (params) => {
		let res = list.value.find(obj => obj._id == params._id)
		if (!res) {
			return
		}
		res.like_count = params.like_count
	})
</script>

<style lang="scss">
	page {
		background: $me-color-background;
	}
</style>

<style lang="scss" scoped>
	.content {}

	.title-xiaoxi {
		border: 1rpx solid rgba(44, 165, 219, 0.5);
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 16rpx 0rpx rgba(133, 204, 233, 0.6);
		right: 30rpx;
		overflow: hidden;
	}

	.title-xiaoxi-image {
		height: 100%;
	}

	.swiper {
		height: 200rpx;
	}

	.bannerImage {
		height: 100%;
		width: 100%;
	}

	.settings-box {
		margin: 20rpx 40rpx;
		background-color: white;
		height: 80rpx;
		border: 1rpx solid rgba(44, 165, 219, 0.5);
		border-radius: 4rpx;
		align-items: center;
		box-shadow: 0 8rpx 16rpx 0 rgba(133, 204, 233, 0.6);
	}

	.settings-box-image {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
	}

	.settings-box-text {
		color: $me-color-gray-placeholder;
		flex: 1;
		text-align: center;
		font-size: 30rpx;
	}

	.navigator {
		padding: 32rpx 60rpx 44rpx;
		justify-content: space-between;
		background-color: white;
	}

	.navigator-box-image {
		height: 80rpx;
	}

	.navigator-box-text {
		margin-top: 12rpx;
		font-size: 24rpx;
		color: $me-color-blue;
	}

	.information {
		padding: 0 40rpx 20rpx;
		background-color: white;
		align-items: center;
	}

	.latest {
		padding: 3rpx 10rpx;
		background-color: #4f4f4f;
		color: white;
		border-radius: 20rpx;
	}

	.line {
		margin-left: 8rpx;
		background-color: #4f4f4f;
		height: 2rpx;
		flex: 1;
	}
</style>